﻿@model SMECustomerWebsite.Models.ViewModels.ProductHandbook.ProductHandbookCustomerChecklistViewModel
<ul id="menu_product_handbook_detail" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
    <li role="presentation" class="">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailInfoTab, "ProductDetail", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId }, null)
    </li>
    <li role="presentation" class="active">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailChecklistTab, "Checklist", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId }, null)
    </li>
</ul>
<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>CHECKLIST CUSTOMER</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <!-- check list -->
                <div id="div_checklist_customer" class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistCustInfoTitle</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
                                    <input type="text" class="form-control has-feedback-left" id="custCif" placeholder="Cif" value="@Model.checklistCustomer.Cif" disabled>
                                    <span class="form-control-feedback left" aria-hidden="true">@SMECustomerWebsite.Core.Resources.Resource.CifHeader</span>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
                                    @if (string.IsNullOrEmpty(Model.checklistCustomer.Cif))
                                    {
                                        <input type="text" class="form-control has-feedback-left" id="custName" placeholder="Customer Name" value="@Model.checklistCustomer.CustName">
                                    }
                                    else
                                    {
                                        <input type="text" class="form-control has-feedback-left" id="custName" placeholder="Customer Name" value="@Model.checklistCustomer.CustName" disabled>
                                    }

                                    <span class="form-control-feedback left" aria-hidden="true">@SMECustomerWebsite.Core.Resources.Resource.NameHeader</span>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
                                    @if (string.IsNullOrEmpty(Model.checklistCustomer.Cif))
                                    {
                                        <input type="text" class="form-control has-feedback-left" id="legalId" placeholder="Legal Id" value="@Model.checklistCustomer.LegalId">
                                    }
                                    else
                                    {
                                        <input type="text" class="form-control has-feedback-left" id="legalId" placeholder="Legal Id" value="@Model.checklistCustomer.LegalId" disabled>
                                    }

                                    <span class="form-control-feedback left" aria-hidden="true">@SMECustomerWebsite.Core.Resources.Resource.ChecklistLegalIdHeader</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocTitle <span id="sub_product_name">@Model.checklistCustomer.SubProductName</span><small><strong> Checked: <span class="checklist_count_cust" id="count_checked">@Model.checklistCustomer.Checked</span>/ Unchecked: <span class="checklist_count_cust" id="count_unchecked">@Model.checklistCustomer.Unchecked</span> </strong> </small></h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div id="cm-search-box" class="col-md-6 cm-search-box">
                                        <div class="col-md-5">
                                            <label class="">
                                                @SMECustomerWebsite.Core.Resources.Resource.StatusHeader
                                            </label>
                                        </div>
                                        <div class="col-md-7">
                                            <fieldset id="cus_status_search_field">
                                                <select class="form-control" tabindex="-1" id="check_status">
                                                    <option class="cus_status_search_option"></option>
                                                </select>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <table id="checklist_document" class="custom_table table table-striped jambo_table bulk_action">
                                        <thead>
                                            <tr class="headings">
                                                <th class="column-title">Hồ sơ </th>
                                                <th class="column-title">Bản gốc</th>
                                                <th>
                                                    <input type="checkbox" id="check-all" class="flat">
                                                </th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocumentHeader.ToUpper()</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistOrigiHeader.ToUpper()</th>
                                                <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeader.ToUpper()</th>
                                                <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistDuplicateHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDupHeader.ToUpper()</th>
                                                <th class="column-title" width="30%">@SMECustomerWebsite.Core.Resources.Resource.ChecklistNoteHeader.ToUpper()</th>
                                                <th class="column-title last">@SMECustomerWebsite.Core.Resources.Resource.ChecklistSamplePhotoHeader.ToUpper()</th>
                                                <th class="bulk-actions" colspan="7">
                                                    <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> )</a>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                        @Html.ActionLink("Cancel", "Checklist", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId }, new { @class = "btn btn-primary" })
                                        <button class="btn btn-success" onclick="return submitData();" id="pm-ap-submit-btn">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End to do list -->
</div>
@section scripts
{
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="~/Scripts/vendors/fancyImage/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/vendors/fancyImage/jquery.fancybox.css" media="screen" />
    <!-- Switchery -->
    <script src="~/Scripts/vendors/switchery/dist/switchery.min.js"></script>
    <!-- iCheck -->
    <script src="~/Scripts/vendors/iCheck/icheck.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var visibleColumn = [0, 1];

            $.ajax({
                url: '@Url.Action("ViewChecklistCustomerDatatable", "ProductHandbook")' + '?ccid=@Model.checklistCustomer.Ccid',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                contentType: false,
                processData: false,
                success: function (result) {
                    var table = $('#checklist_document').DataTable({
                        //bFilter: false,
                        bInfo: false,
                        bPaginate: false,
                        "responsive": true,
                        "bAutoWidth": false,
                        //"order": [[8, 'asc']],
                        //"bServerSide": true,
                        destroy: true,
                        //"bProcessing": true,
                        "data": result,
                        destroy: true,
                        fixedHeader: true,
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                        "aoColumns": [
                                    { "sName": "CIF", "bSortable": false },
                                    { "sName": "NAME", "bSortable": false },
                                    { "sName": "CIF", "bSortable": false },
                                    { "sName": "NAME", "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                                    { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                                    { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false }],
                        "columnDefs": [{
                            "sClass": "a-center ",
                            "aTargets": 2,
                            "mRender": function (data, type, full) {
                                if (data == 0) {
                                    return '<input type="checkbox" class="flat" id="chkbox_checklist_' + full[9] + '" name="chkbox_checklist_' + full[9] + '" onclick=\"countCheck(\'chkbox_checklist_' + full[9] + '\');\">';
                                } else {
                                    return '<input type="checkbox" class="flat" id="chkbox_checklist_' + full[9] + '" name="chkbox_checklist_' + full[9] + '" onclick=\"countCheck(\'chkbox_checklist_' + full[9] + '\');\" checked>';
                                    //return '<input type="checkbox" class="flat" name="chkbox_checklist_' + full[9] + '" >';
                                }
                            }
                        }, {
                            "sClass": "a-center ",
                            "aTargets": 7,
                            "mRender": function (data, type, full) {
                                if (data != null && data.length > 50) {
                                    return '<span class="teaser">' + data.substring(0, 50) + '</span><span class="complete" id="complete' + full[9] + '">' + data.substring(50, data.length) + '</span><span id="more' + full[9] + '" class="more"  onclick=\"showMore(\'' + full[9] + '\' );\">...(more)</span>';
                                } else {
                                    return data;
                                }

                            }
                        }, {
                            "sClass": "a-center ",
                            "aTargets": 8,
                            "mRender": function (data, type, full) {
                                if (data != null && data.length > 0) {
                                    return '<a class="btn btn-primary btn-xs" onclick="showDocumentPicture(\'' + full[8] + '\');"><i class="fa fa-eye"></i></a>';
                                } else {
                                    return data;
                                }
                            }
                        }, {
                            "visible": false, "targets": visibleColumn
                        }],
                        "drawCallback": function (settings) {
                            var api = this.api();
                            var rows = api.rows({ page: 'current' }).nodes();
                            var last = null;

                            api.column(0, { page: 'current' }).data().each(function (group, i) {
                                if (last !== group) {
                                    $(rows).eq(i).before(
                                        '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                                    );
                                    last = group;
                                }
                            });
                            api.column(1, { page: 'current' }).data().each(function (group, i) {
                                if (last !== group && group != null) {
                                    $(rows).eq(i).before(
                                        '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                                    );
                                    last = group;
                                }
                            });
                        }
                    });

                    $('#check_status').select2({
                        placeholder: "Select status",
                        data: [{ id: 2, text: 'All' }, { id: false, text: 'Unchecked' }, { id: true, text: 'Checked' }]
                    });
                    table.columns().every(function () {
                        var that = this;
                        $("#check_status").on("change", function (e) {
                            that.search('').draw();
                            if (that.index() == 2) {
                                if (this.value == "2") {

                                } else {
                                    var choosed = this.value == "false" ? false : true;
                                    //build a filter string with an or(|) condition
                                    var frees = $('input:checkbox[name^=chkbox_checklist_]').map(function () {
                                        if (choosed == this.checked) {
                                            return this.name;
                                        }
                                    }).get().join('|');
                                    frees = frees + '|';
                                    that.search(frees).draw();
                                }
                            }
                        });
                    });
                    countCheck();
                    //$('#div_question_checklist').hide();
                    //$('#div_checklist_customer').show();
                    table.fixedHeader.enable();
                },
                error: function (result) {

                }
            });
        });

        function countCheck(value) {
            count_checked = 0;
            count_unchecked = 0;
            if (value == null) {
                var data = $('[name^=chkbox_checklist_]');
                var content = [];
                data.each(function (index, item) {
                    if (item.checked) {
                        count_checked += 1;
                    } else {
                        count_unchecked += 1;
                    };
                });
            } else {
                count_checked = parseInt($('#count_checked').text());
                count_unchecked = parseInt($('#count_unchecked').text());
                if ($('#' + value)[0].checked) {
                    count_checked += 1;
                    count_unchecked -= 1;
                } else {
                    count_checked -= 1;
                    count_unchecked += 1;
                }
            }

            $('#count_checked').text(count_checked);
            $('#count_unchecked').text(count_unchecked);
        }

        //show document image
        function showDocumentPicture(picName) {
            var arrPic = picName.split(",");
            var arrFancy = [];
            arrPic.forEach(function (entry) {
                arrFancy.push({
                    href: '/Scripts/vendors/fancyImage/@Model.checklistCustomer.ProductId/' + entry
                })
            });
            $.fancybox.open(arrFancy, {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        };

        function showMore(id) {
            if ($("#more" + id + "").text() == "...(more)") {
                $("#complete" + id + "").show();
                $("#more" + id + "").text(" (less)");
            } else {
                $("#complete" + id + "").hide();
                $("#more" + id + "").text("...(more)");
            }
        }

        function submitData() {
            var data = $('[name^=chkbox_checklist_]');
            var content = [];
            //content.push([$('#custCif').val(), $('#custName').val(), $('#legalId').val()]);
            data.each(function (index, item) {
                var row = [];
                row.push(item.name);
                row.push(item.checked);
                content.push(row);
            });
            var jsonData = JSON.stringify(content);
            $.ajax({
                url: '@Url.Action("UpdateChecklist", "ProductHandbook")',
                type: "POST",
                data: { dataedit: jsonData, ccid: '@Model.checklistCustomer.Ccid' },
                success: function (data_response) {
                    if (data_response == true) {
                        window.location.replace("@Url.Action("Checklist", "ProductHandbook", new { productid = Model.checklistCustomer.ProductId })");
                    }
                }
            })
            return false;
        }
    </script>
}
